<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
		    margin: 0px;
		    padding: 0px;
	        box-sizing: border-box;
		}
	    body{
	        background: url("image/register_bg.png") no-repeat center;		        
            padding-top: 25px;
		}

        .reg-layout{
            display: flex;
            background-color:white;
            border: 5px rgb(179, 171, 167) solid;
            border-radius: 2px;
            width: 60%;
            height: 500px;
            margin: auto;
        }
        .reg-left{
            
            padding-top: 10px;
            padding-left: 30px;
        }

        .reg-left .p1{
            color: rgb(255, 205, 47);
            font-size:large;
            line-height: 2;
        }
        .reg-left .p2{
            color: rgb(179, 171, 167);
            font-size:large;
        }

        .reg-center{
            
            margin-left: 200px;
            margin-top: 20px;
            
        }

        .reg-center .td-left{
            text-align: right;
            color: gray;
            padding-right: 10px;
        }

        #account,#password,#Email,#name,#phone,#birth,#verify_code{
            width: 200px;
            height: 30px;
            border-radius: 5px;
            border: 2px  rgb(179, 171, 167) solid;
            
        }
        table tr{
            height: 50px;
            margin: auto;
        }


        #verify_img{
            height: 70%;
            vertical-align:middle;
        }

        .reg-right{
            
            margin: auto;
            padding: 20px;
        }

        #but_sub{
            background-color: yellow;
            width: 200px;
            height: 50px;
            border: 1px yellow solid;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="reg-layout">
        <div class="reg-left">
            <p class="p1">新用户注册</p>
            <p class="p2">USER REGISTER</p>
        </div>
        <div class="reg-center">
            <font>
                <table >
                    <!-- 第一行 -->
                    <tr>
                        <td class="td-left">用户名</td>
                        <td>
                            <input type="text" placeholder="请输入账号" id="account">
                            <span id="s_account" class="error"></span>
                        </td>
                    </tr>
        
                    <!-- 第二行 -->
                    <tr>
                        <td class="td-left">密码</td>
                        <td><input type="password" placeholder="请输入密码" id="password">
                            <span id="s_password" class="error"></span></td>
                    </tr>
        
                    <!-- 第三行 -->
                    <tr>
                        <td class="td-left">Email</td>
                        <td><input type="text" placeholder="请输入邮箱" id="Email"></td>
                    </tr>
        
                    <!-- 第四行 -->
                    <tr>
                        <td class="td-left">姓名</td>
                        <td><input type="text" placeholder="请输入真实姓名" id="name"></td>
                    </tr>
        
                    <!-- 第五行 -->
                    <tr>
                        <td class="td-left">手机号码</td>
                        <td><input type="text" placeholder="请输入手机号码" id="phone"></td>
                    </tr>
        
                    <!-- 第六行 -->
                    <tr>
                        <td class="td-left" >性别</td>
                        <td id="gender">
                            <input type="radio" class="gender">男
                            <input type="radio" class="gender">女
                        </td>
                    </tr>
                    <!-- 第七行 -->
                    <tr>
                        <td class="td-left" >出生日期</td>
                        <td><input type="date" id="birth"> </td>
                    </tr>
        
                    <!-- 第八行 -->
                    <tr>
                        <td class="td-left">验证码</td>
                        <td>
                            <input type="text" placeholder="请输入验证码"  id="verify_code">
                            <img src="image/verify_code.jpg" id="verify_img">
                        </td>
                    </tr>
        
                    <!-- 第九行 -->
                    <tr>
                        <td colspan="2" >
                            <input type="submit" value="注册"  id="but_sub">
                        </td>
                    </tr>
        
                </table>
            </font>
        </div>
        <div class="reg-right">
            <p>已有账号<a href="#">立即注册</a></p>
        </div>
    </div>


    <script>
        var account = document.getElementById("account");
        function checkAccount() {
            account_value = account.value;
            var reg = /^\w{6,12}$/;
            var flag = reg.test(account_value);
            if (flag) {
                document.getElementById("s_account").innerHTML = "<img src='image/gou.png' width='30' height='30'>";
            } else {
                document.getElementById("s_account").innerHTML = "用户名格式错误 , 请重新输入";
            }
        }

        var password = document.getElementById("password");
        function checkPassword() {
            password_value = password.value;
            var reg = /^\w{6,12}$/;
            var flag = reg.test(password_value);
            if (flag) {
                document.getElementById("s_password").innerHTML = "<img src='image/gou.png'>";
            } else {
                document.getElementById("s_password").innerHTML = "用户名格式错误 , 请重新输入";
            }
        }
        password.onblur = checkPassword;
        account.onblur = checkAccount;
    </script>
</body>
</html>